<template>
  <view class="feedback-page">
    <nav-bar left-text="反馈与投诉" />
    <bg-set background="#f2f3f7" />
    <view class="feedback-page__main">
      <option-card
        v-for="item in optionCardData"
        :key="item.imageSrc"
        v-bind="item"
        @click="handleOptionCardClick(item.navigateToUrl)"
      ></option-card>
    </view>
  </view>
</template>

<script>
import OptionCard from "./components/option-card.vue";
export default {
  name: "feedback-page",
  components: { OptionCard },
  setup() {
    const optionCardData = [
      {
        imageSrc: "/static/image/profile/crash.png",
        descriptionData: {
          title: "故障反馈",
          description:
            "如遇黑屏、死机、页面无法打开等功能异常问题，请由此向开发者反馈",
        },
        navigateToUrl: "/pages/profile/feedback/crash-feedback",
      },
      {
        imageSrc: "/static/image/profile/complaint.png",
        descriptionData: {
          title: "投诉商家",
          description: "如遇退款、退货退款、商家售后服务等问题，可由此发起投诉",
        },
        navigateToUrl: "/pages/profile/feedback/complaint-feedback",
      },
    ];
    const handleOptionCardClick = (url) => {
      uni.navigateTo({
        url,
      });
    };
    return { optionCardData, handleOptionCardClick };
  },
};
</script>
<style lang='scss' scoped>
.feedback-page {
  width: 100%;
  &__main {
    padding: 30rpx;
    width: 100%;
    box-sizing: border-box;
  }
}
</style>